<template>
  <div v-if="showLoading == true">
    <loading />
  </div>
  <div class="coinBox" v-else>
    <van-nav-bar
      v-if="hideH5Nav == false"
      :title="t('coin.pageTitle')"
      right-text="FAQ"
      left-arrow
      :fixed="true"
      @click-left="onClickLeft"
      @click-right="onClickRight"
    />
    <div class="faq" v-if="hideH5Nav == true" @click="onClickRight">FAQ</div>
    <div :class="hideH5Nav == false ? 'header navStyle' : 'header'">
      <div class="header-left">
        <p class="title">{{ $t("coin.text1") }}</p>
        <p class="supplyCon">{{ $t("coin.text2") }}</p>
      </div>
      <div class="header-right">
        <Images src="/image/coin/header-bg.png" alt="" width="100" />
      </div>

      <div class="content">
        <div class="trendBox">
          <div class="trendBox-text">
            <p class="title">{{ $t("coin.text3") }}</p>
            <p class="describe">{{ $t("coin.text4") }}</p>
          </div>
          <div class="trendBox-img">
            <Images src="/image/coin/trendImg.png" alt="" class="pic" />
          </div>
        </div>
        <div class="describeBox">
          <p class="describe">{{ $t("coin.text5") }}</p>
        </div>

        <div class="rectangle">
          <div class="rectangle-left">
            <p class="topText">{{ $t("coin.text34") }}</p>
            <p class="topText">{{ $t("coin.text35") }}</p>
            <p class="bottomText">{{ $t("coin.text36") }}</p>
          </div>
          <div class="rectangle-right">
            <img
              src="/image/coin/headerRight.svg"
              loading="lazy"
              decoding="async"
            />
          </div>
        </div>

        <div class="group2">
          <p class="title">{{ $t("coin.text6") }}</p>
          <div class="benefitsBox">
            <div class="benefitsBox-left" @click="toDividends">
              <p class="title">{{ $t("coin.text7") }}</p>
              <p class="describe">{{ $t("coin.text8") }}</p>
              <p class="lightText">{{ $t("coin.text12") }}</p>
              <img
                src="/image/coin/group2Left.svg"
                loading="lazy"
                decoding="async"
              />
            </div>
            <div class="benefitsBox-right" @click="toRecycling">
              <p class="title">{{ $t("coin.text10") }}</p>
              <p class="describe">{{ $t("coin.text11") }}</p>
              <p class="lightText">{{ $t("coin.text12") }}</p>
              <img
                src="/image/coin/group2Right.svg"
                loading="lazy"
                decoding="async"
              />
            </div>
          </div>
          <p class="describe">{{ $t("coin.text13") }}</p>
        </div>
        <div class="group3">
          <p class="title">{{ $t("coin.text14") }}</p>
          <div class="list">
            <div class="list-item" v-for="(item, index) in listArr">
              <div class="item-left">
                <div class="item-icon">
                  <img
                    v-if="index == 0"
                    src="/image/coin/itemIcon-01.svg"
                    loading="lazy"
                    decoding="async"
                  />
                  <img
                    v-if="index == 1"
                    src="/image/coin/itemIcon-02.svg"
                    loading="lazy"
                    decoding="async"
                  />
                  <img
                    v-if="index == 2"
                    src="/image/coin/itemIcon-03.svg"
                    loading="lazy"
                    decoding="async"
                  />
                  <img
                    v-if="index == 3"
                    src="/image/coin/itemIcon-04.svg"
                    loading="lazy"
                    decoding="async"
                  />
                  <img
                    v-if="index == 4"
                    src="/image/coin/itemIcon-05.svg"
                    loading="lazy"
                    decoding="async"
                  />
                </div>
                <div class="item-con">
                  <p class="title">{{ item.title }}</p>
                  <p class="tips">
                    <span class="tips-icon">
                      <img
                        src="/image/coin/tips-icon.svg"
                        loading="lazy"
                        decoding="async"
                      />
                    </span>
                    <span class="tips-con">{{ item.tips }}</span>
                  </p>
                </div>
              </div>
              <div class="item-right">
                <div class="item-btn">{{ $t("coin.text12") }}</div>
              </div>
            </div>
          </div>
        </div>
        <div class="group5">
          <p class="title">{{ $t("coin.text27") }}</p>
          <div class="eventList">
            <div class="event-item">
              <img
                class="time-icon"
                src="/image/coin/circular.svg"
                loading="lazy"
                decoding="async"
              />
              <p class="timeStr">{{ $t("coin.text28") }}</p>
              <div class="event-con" @click="toPlan">
                <Images src="/image/coin/eventBg-02.png" alt="" />
                <p class="title">{{ $t("coin.text29") }}</p>
                <p class="describe">{{ $t("coin.text30") }}</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
const headerBg = useNuxtImage("/image/coin/header-bg.png");
import { compare } from "~/utils/calculation";
import { navigateBack } from "@/utils";
const { t, locale } = useI18n();

const $router = useRouter(); // 路由跳转
const $route = useRoute();
const firebase = useInitFirebase(); // 初始化firebase
const localePath = useLocalePath(); // 路由跳转
const onClickLeft = () => {
  navigateBack();
};
const showLoading = ref(true);
const hideH5Nav = ref(false);
const onClickRight = () => {
  firebase?.logEvent("BDC_H5_FAQJump");
  $router.push(
    localePath({
      path: "/FAQ/question",
      query: { hideH5Nav: hideH5Nav.value },
    })
  );
  let title = t("question.pageTitle");
  showNavFun(title);
};
const toDividends = () => {
  firebase?.logEvent("BDC_H5_DividendsJump");
  $router.push(
    localePath({
      path: "/dividends/dividends",
      query: { hideH5Nav: hideH5Nav.value },
    })
  );
  let title = t("dividends.pageTitle");
  showNavFun(title);
};
const toRecycling = () => {
  firebase?.logEvent("BDC_H5_RecyclingJump");
  $router.push(
    localePath({
      path: "/recycling/recycling",
      query: { hideH5Nav: hideH5Nav.value },
    })
  );
  let title = t("recyling.pageTitle");
  showNavFun(title);
};
const toWallet = () => {
  firebase?.logEvent("BDC_H5_WalletJump");
  $router.push({ path: "/wallet/wallet" });
  // $router.push(
  //   localePath({
  //     path: "/wallet/wallet",
  //     query: { hideH5Nav: hideH5Nav.value },
  //   })
  // );
  // let title = t("wallet.pageTitle");
  // showNavFun(title);
};
const toPlan = () => {
  firebase?.logEvent("BDC_H5_PlanJump");
  $router.push(
    localePath({
      path: "/plan/plan",
      query: { hideH5Nav: hideH5Nav.value },
    })
  );
  let title = t("plan.pageTitle");
  showNavFun(title);
};
const getAssetsImages = (name) => {
  return new URL(`/image/coin/${name}`, import.meta.url).href; //本地文件路径
};
const listArr = reactive([
  {
    title: t("coin.text15"),
    tips: t("coin.text16"),
  },
  {
    title: t("coin.text17"),
    tips: t("coin.text18"),
  },
  {
    title: t("coin.text19"),
    tips: t("coin.text20"),
  },
  {
    title: t("coin.text21"),
    tips: t("coin.text22"),
  },
  {
    title: t("coin.text23"),
    tips: t("coin.text24"),
  },
]);

// 是否隐藏原生导航栏
const showNavFun = (pageTitle) => {
  let u = navigator.userAgent;
  let isAndroid = u.indexOf("Android") > -1 || u.indexOf("Linux") > -1; //android终端
  let isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
  if (isAndroid) {
    let packageId = bridge.getAppPackageId();
    const versionStrs = packageId.split("-");
    const versionPrefix = versionStrs[0] || "";

    console.log(packageId, "--bbb---", versionPrefix);

    let basePackageId = "";
    // 以下版本判断是为了避免,无导航的情况处理的(2024年以后的新包,基本无需处理这种情况,默认都是显示原生导航)
    if (versionPrefix === "BtcDana") {
      basePackageId = "BtcDana-1.8.83-com.indone.online-android";
    } else if (versionPrefix === "BtcDanaAsia") {
      basePackageId = "BtcDanaAsia-1.0.6-com.indone.online-android";
    } 
    // 后续新包(2024年以后的新包,基本无需处理这种情况,默认都是显示原生导航)
    else  {
      basePackageId = "";
    }
    // 老版本用原生，中间版本用自己的导航
    if (basePackageId) {
      let compareVersion = compare(packageId, basePackageId);
      if (compareVersion == -1) {
        hideH5Nav.value = true;
      }
    }
    // 其他情况就使用原生导航
    else {
      hideH5Nav.value = true;
    }
  }

  if (isIOS) {
    let packageId = bridge.getAppPackageId();
    let basePackageId = "BtcDana.IOS-1.2.15-com.indone.online-ios";
    let compareVersion = compare(packageId, basePackageId);

    if (compareVersion == -1) {
      //小于"BtcDana.IOS-1.2.15-com.indone.online-ios"版本
      hideH5Nav.value = true;
      let title = !!pageTitle ? pageTitle : t("coin.pageTitle");
      bridge.setTitle(title);
    } else {
      hideH5Nav.value = false;
    }
  }
};

onMounted(() => {
  // pv/uv 埋点；firebase去重原理暂时不清楚
  firebase?.logEvent("BDC_H5_Into_Coin");
  showNavFun();
  showLoading.value = false;
});
</script>
<style lang="scss" scoped>
.coinBox {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow-y: scroll;
  background: linear-gradient(180deg, #f0f4fa 0%, #f4f5f7 100%);
  margin-bottom: constant(safe-area-inset-bottom);
  margin-bottom: env(safe-area-inset-bottom);
  .faq {
    position: absolute;
    right: 33px;
    font-size: 28px;
    top: 30px;
    color: #007bff;
    text-decoration: underline;
    z-index: 99;
  }
  .navStyle {
    margin-top: 94px !important;
  }
  .header {
    display: flex;
    justify-content: space-between;
    padding: 30px;
    position: relative;
    //margin-top: 94px;

    .header-left {
      width: 70%;
      //margin-bottom: 80px;
      .supplyCon {
        color: var(--Brand-Blue, #007bff);
        font-size: 48px;
        font-weight: 700;
        line-height: 60px;
      }
    }
    .header-right {
      width: 400px;
      height: 200px;
      img {
        width: 100%;
      }
    }

    .content {
      background: var(--background-color-light, #f4f5f7);
      position: absolute;
      top: 200px;
      left: 0;
      padding: 0 30px;
      .trendBox {
        height: 320px;
        flex-shrink: 0;
        border-radius: 12px;
        background: var(--White, #fff);
        position: relative;
        .trendBox-text {
          padding: 20px 30px;
          .describe {
            line-height: 36px;
            color: var(--Gray, #797c83);
            font-size: 22px;
            font-weight: 400;
          }
        }
        .trendBox-img {
          position: absolute;
          bottom: 0;
          width: 100%;
          height: 168px;
          .pic {
            width: 100%;
            height: 100%;
          }
        }
      }
      .describeBox {
        margin-top: 30px;
      }
      .rectangle {
        text-align: center;
        //height: 180px;
        background: #fff;
        border-radius: 24px;
        padding: 30px;
        margin: 40px 0;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .rectangle-left {
          text-align: left;
          .topText {
            color: #141924;
            font-size: 30px;
            font-weight: 590;
            line-height: 44px;
          }
          .bottomText {
            color: #797c83;
            font-size: 30px;
            font-weight: 400;
            line-height: 40px;
          }
        }
        .rectangle-right {
          img {
            //width: 180px;
            height: 120px;
          }
        }
      }
      .group2 {
        margin-bottom: 30px;
        .benefitsBox {
          padding: 20px 0;
          margin: 20px 0;
          height: 200px;
          background: var(--White, #fff);
          border-radius: 12px;
          display: flex;
          //justify-content: space-between;
          .benefitsBox-left {
            padding: 0 30px;
            width: 50%;
            border-right: 1px solid #f4f5f7;
            position: relative;
            img {
              position: absolute;
              bottom: 0;
              right: 30px;
              width: 100px;
              height: 100px;
            }
          }
          .benefitsBox-right {
            padding: 0 30px;
            width: 50%;
            position: relative;
            img {
              position: absolute;
              bottom: 0;
              right: 30px;
              width: 100px;
              height: 100px;
            }
          }
        }
      }
      .group3 {
        .list {
          padding: 20px;
          margin: 20px 0;
          background: #fff;
          border-radius: 12px;
          .list-item {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 60px;
            &:last-child {
              margin-bottom: 0px;
            }
            .item-left {
              display: flex;
              align-items: center;
              .item-icon {
                width: 88px;
                height: 88px;
                img {
                  width: 100%;
                }
              }
              .item-con {
                margin-left: 15px;
                .tips {
                  display: flex;
                  align-items: center;
                  .tips-icon {
                    width: 28px;
                    height: 28px;
                    img {
                      width: 100%;
                    }
                  }
                  .tips-con {
                    margin-left: 10px;
                    color: #007bff;
                    font-size: 26px;
                    font-weight: 400;
                    line-height: 36px;
                  }
                }
              }
            }
            .item-right {
              width: 180px;
              height: 56px;
              .item-btn {
                color: #797c83;
                text-align: center;
                width: 100%;
                height: 100%;
                display: flex;
                align-items: center;
                justify-content: center;
                border-radius: 28px;
                font-weight: 400;
                font-size: 22px;
                letter-spacing: -0.4px;
                background: #e8eaf0;
              }
            }
          }
        }
      }

      .group4 {
        .walletBox {
          background: #fff;
          border-radius: 24px;
          margin: 20px 0 30px 0;
          overflow: hidden;
          img {
            width: 100%;
          }
          .imgBox {
            width: 100%;
            position: relative;
            .imgText {
              font-size: 28px;
              color: #fff;
              position: absolute;
              top: 40px;
              left: 40px;
              width: 60%;
            }
          }
          .btnBox {
            padding: 20px 30px;
            .btn {
              background: var(--Brand-Blue, #ffb240);
              color: #fff;
              text-align: center;
              height: 80px;
              line-height: 80px;
              border-radius: 50px;
              font-size: 30px;
              display: block;
            }
          }
        }
      }
      .group5 {
        margin-top: 20px;
        .eventList {
          margin-top: 20px;

          .event-item {
            padding-left: 30px;
            padding-bottom: 30px;
            position: relative;
            border-left: 4px solid #fff;
            .time-icon {
              position: absolute;
              top: 1px;
              left: -12px;
              width: 24px;
              height: 24px;
            }
            .timeStr {
              font-size: 26px;
              font-weight: 400;
              //line-height: 36px;
              display: flex;
              align-items: center;
            }
            .event-con {
              border-radius: 24px;
              background: #fff;
              padding: 20px;
              margin-top: 20px;
              img {
                width: 100%;
              }
              .title {
                margin: 10px 0;
              }
            }
          }
        }
      }
    }
  }
}
.title {
  color: var(--Black-Blue, #141924);
  font-weight: 590;
  line-height: 40px;
  font-size: 30px;
}
.describe {
  color: var(--Gray, #797c83);
  font-size: 22px;
  line-height: normal;
  font-weight: 400;
}
.lightText {
  color: var(--Brand-Blue, #007bff);
  font-size: 26px;
  font-weight: 590;
  line-height: 36px;
}
</style>
